<template>
  <div class="upload-center">
    <div class="upload-center__search">
      <el-input
        placeholder="站内检索"
        v-model="keyword"
        class="input-with-select"
      >
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <!-- 审查类  -->
    <el-card shadow="never" style="margin-top:20px;">
      <div class="upload-center__container-title">审查类</div>
      <el-row type="flex" justify="space-between">
        <div style="width:100%;">
          <el-table
            :data="tableDate"
            :show-header="false"
            :row-style="rowStyleHandle"
          >
            <el-table-column show-overflow-tooltip>
              <template v-slot="{ row }">
                <span style="color: #2d54b8;font-size: 14px;">
                  {{ row.name }}
                </span>
              </template>
            </el-table-column>
            <el-table-column width="130" show-overflow-tooltip>
              <template v-slot="{ row }">
                <i class="el-icon-time icon-font-weight"></i>
                <span style="font-size: 14px">{{ row.date }}</span>
              </template>
            </el-table-column>
            <el-table-column width="130" show-overflow-tooltip>
              <template v-slot="{ row }">
                <el-button
                  icon="el-icon-download"
                  v-if="row.url"
                  @click="downFile(row.url)"
                  size="mini"
                  >下载</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-row>
    </el-card>
    <!-- 手册类  -->
    <el-card shadow="never" style="margin-top: 20px">
      <div class="upload-center__container-title">手册类</div>
      <el-row type="flex" justify="space-between">
        <div style="width: 100%">
          <el-table
            :data="tableDate"
            :show-header="false"
            :row-style="rowStyleHandle"
          >
            <el-table-column show-overflow-tooltip>
              <template v-slot="{ row }">
                <span style="color: #2d54b8;font-size: 14px;">
                  {{ row.name }}
                </span>
              </template>
            </el-table-column>
            <el-table-column width="130" show-overflow-tooltip>
              <template v-slot="{ row }">
                <i class="el-icon-time icon-font-weight"></i>
                <span style="font-size: 14px">{{ row.date }}</span>
              </template>
            </el-table-column>
            <el-table-column width="130" show-overflow-tooltip>
              <template v-slot="{ row }">
                <el-button
                  icon="el-icon-download"
                  v-if="row.url"
                  @click="downFile(row.url, row.name)"
                  size="mini"
                  >下载</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { downloadCenterList } from "@api/details";
export default {
  name: "UploadCenter",
  data() {
    return {
      keyword: "",
      tableDate: [
        {
          title: "<<专利审查指南2010>>(2019年修订)电子板",
          date: "2021-06-30",
          isUpdate: true,
          total: 1255
        },
        {
          title: "请求集中审查的发明专利案件清单",
          date: "2021-06-30",
          isUpdate: false,
          total: 1255
        },
        {
          title: "请求集中审查的发明专利案件清单",
          date: "2021-06-30",
          isUpdate: false,
          total: 1255
        },
        {
          title: "请求集中审查的发明专利案件清单",
          date: "2021-06-30",
          isUpdate: false,
          total: 1255
        },
        {
          title: "请求集中审查的发明专利案件清单",
          date: "2021-06-30",
          isUpdate: false,
          total: 1255
        },
        {
          title: "请求集中审查的发明专利案件清单",
          date: "2021-06-30",
          isUpdate: false,
          total: 1255
        },
        {
          title: "请求集中审查的发明专利案件清单",
          date: "2021-06-30",
          isUpdate: false,
          total: 1255
        },
        {
          title: "请求集中审查的发明专利案件清单",
          date: "2021-06-30",
          isUpdate: false,
          total: 1255
        },
        {
          title: "请求集中审查的发明专利案件清单",
          date: "2021-06-30",
          isUpdate: false,
          total: 1255
        }
      ],
      tableDate1: [
        {
          title: "<<专利审查指南2010>>(2019年修订)电子板",
          date: "2021-06-30",
          isUpdate: true,
          total: 1255
        },
        {
          title: "请求集中审查的发明专利案件清单",
          date: "2021-06-30",
          isUpdate: false,
          total: 1255
        },
        {
          title: "请求集中审查的发明专利案件清单",
          date: "2021-06-30",
          isUpdate: false,
          total: 1255
        }
      ]
    };
  },
  methods: {
    rowStyleHandle({ rowIndex }) {
      console.log(rowIndex);
      if (rowIndex === 0) {
        // return { backgroundColor: "rgb(244, 246, 251)", padding: "9px 0" };
      }
    },
    async DownloadCenterList() {
      const { code, data } = await downloadCenterList({});
      console.log(data);
      if (code == 200) {
        this.tableDate = data.examination;
        this.tableDate1 = data.manual;
      }
    },
    downFile(url, name) {
      let a = document.createElement("a");
      a.href = url;
      a.download = name;
      a.click();
    }
  },
  mounted() {
    this.DownloadCenterList();
  }
};
</script>

<style lang="scss" scoped>
.upload-center__search {
  display: none;
}
.el-table__row {
  background: #fff !important;
}
.upload-center {
  width: 1200px;
  margin: auto;

  &__search {
    width: 725px;
    margin: 20px auto;
  }

  &__container {
    &-title {
      font-size: 18px;
      font-weight: 700;
      display: flex;
      color: #303133;
      margin-bottom: 20px;

      &::before {
        content: "";
        display: block;
        width: 4px;
        height: 18px;
        background: #2d54b8;
        margin-right: 5px;
      }
    }
  }
}
</style>
<style lang="scss">
.upload-center {
  &__search {
    .el-input-group__append {
      background-color: #2d54b8;
      color: white;
      border: 1px solid #2d54b8;
    }
  }

  .el-table {
    border-left: 1px solid #ebeef5;
    border-right: 1px solid #ebeef5;
    border-top: 1px solid #ebeef5;
    font-size: 14px !important;
    color: #909399;

    .el-button--mini {
      /*font-weight: 700;*/
      padding: 5px 12px;
      font-size: 13px;

      .el-icon-download {
        font-weight: 700;
      }
    }
  }

  .icon-font-weight {
    font-weight: 700;
    font-size: 14px;
    margin-right: 2px;
  }
}
</style>
